
<!DOCTYPE HTML>

<html>

<head>
	<meta charset="utf-8">
	<title>easel.js游戏（背景切换） - 前端艺术</title>
	<meta name="author" content="Nicholas">

	
	<meta name="description" content="easel.js游戏（背景切换） 这是一个背景切换的例子： html: &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"/&gt;
&lt;link href="css/mindGame.css" &hellip;">
	

  <!-- http://t.co/dKP3o1e -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">

	<link href="/atom.xml" rel="alternate" title="前端艺术" type="application/atom+xml">
	
	<link rel="canonical" href="http://xiebaochun.github.io/blog/2013/09/12/mindgame/">
	<link href="/favicon.png" rel="shortcut icon">
	<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
	<link href="/stylesheets/font-awesome.min.css" media="screen, projection" rel="stylesheet" type="text/css">
	<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

</head>


<body>
	<div class="container">
		<div class="left-col">
			<div class="intrude-less">
			<header id="header" class="inner"><div class="profilepic">
<!--the weather pugin-->
    <script defer src="http://julying.com/lab/weather/v3/jquery.weather.build.min.js?parentbox=body&moveArea=all&zIndex=1&move=1&drag=1&autoDrop=1&styleSize=big&style=_random&area=client&city=%E5%8C%97%E4%BA%AC"></script>
	<script src="/javascripts/md5.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.profilepic').append("<img src='https://si0.twimg.com/profile_images/378800000316979686/061b0d73fe1b9cc3a643a68bcb077161.jpeg' alt='Profile Picture' style='width: 160px;' />");
		});
	</script>
</div>
<hgroup>
  <h1><a href="/">前端艺术</a></h1>
  
    <h2>one blog for games.</h2>
  
</hgroup>

<nav id="main-nav"><ul class="main-navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/blog/archives">Archives</a></li>
  <li><a href="http://www.juerry.com/index.html">my lab</a></li>
</ul>


<section class="aboutme">
  <p>
    专注于移动开发
  </p>
</section>
</nav>
<nav id="sub-nav">
	<div class="social">
		
		
		
		<a class="twitter" href="http://twitter.com/xiebaochun" title="Twitter">Twitter</a>
		
		
		<a class="github" href="https://github.com/xiebaochun" title="GitHub">GitHub</a>
		
		
		
		
		
		
		
		
		<a class="rss" href="/atom.xml" title="RSS">RSS</a>
		
	</div>
</nav>
<section>
  <h1>Categories</h1>
    <ul id="category-list"><li><a href='/blog/categories/ios/'>ios (2)</a></li><li><a href='/blog/categories/other/'>other (14)</a></li><li><a href='/blog/categories/web/'>web (23)</a></li></ul>
</section>

</header>				
			</div>
		</div>	
		<div class="mid-col">
			
				
			
			<div class="mid-col-container">
				<div id="content" class="inner"><article class="post" itemscope itemtype="http://schema.org/BlogPosting">
	<h1 class="title" itemprop="name">easel.js游戏（背景切换）</h1>
	<div class="entry-content" itemprop="articleBody"><p>这是一个背景切换的例子：
<!--more-->
html:</p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"/&gt;
&lt;link href="css/mindGame.css" type="text/css" rel="stylesheet"&gt;&lt;/link&gt;
&lt;script src="http://code.createjs.com/easeljs-0.6.0.min.js"&gt;&lt;/script&gt;
&lt;script src="script/mindgame.js"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="init();"&gt;
&lt;canvas id="gameCanvas" width="640px" height="384px"&gt;
&lt;/canvas&gt;
&lt;p&gt;If you click on me, I will disappear.&lt;/p&gt;
&lt;p&gt;Click me away!&lt;/p&gt;
&lt;p&gt;Click me too!&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>js:</p>

<pre><code>//var background;
var stage;
var gameCanvas;
var ctx;
var output;
var background;
var bg_index=0;
var BackGrounds=new Array();  
var Options=new Array();
var background_change_speed=0.03;
var gameState="start";
var textBox1;
var isChange=false;
var targetBG_index_switchTo=1;
function textBox()
{
	this.output=stage.addChild(new createjs.Text("","18px monospace","#000"));
this.output.lineHeight=15;
this.output.lineWidth=200;
this.output.textBaseline="top";
this.output.x=10;
this.output.y=10;
this.output.text="this is textBox1";
}
function BackGround(file)
{
this.Bitmap=new createjs.Bitmap(file);
this.Bitmap.scaleX=0.5;
this.Bitmap.scaleY=0.5;
//this.bg_index=1;
}
function init(){
	//code here
	//background=new Image();
	//background.src="Images/BackGrounds/bg-01.png";
	$("#gameCanvas").click(function(){
		//$(this).hide();
if(BackGrounds[bg_index].Bitmap.alpha&gt;=1){
 isChange=true;
  targetBG_index_switchTo++;
}  
	});   
stage=new createjs.Stage("gameCanvas");
for(var i=0;i&lt;7;i++){
var j=i+1;
 BackGrounds[i]=new BackGround("Images/BackGrounds/bg-0"+j+".png");
 BackGrounds[i].Bitmap.visible=false;
  BackGrounds[i].Bitmap.alpha=0.2;
 stage.addChild(BackGrounds[i].Bitmap);
}
 BackGrounds[0].Bitmap.visible=true;
 BackGrounds[0].Bitmap.alpha=1;
createjs.Ticker.addEventListener("tick",gameUpdate);
//createjs.Ticker.setInterval(30);
createjs.Ticker.setFPS(40);
//stage.update();
//var ME=new createjs.MouseEvent(click,0,0,gameCanvas,)
//UI code
output=stage.addChild(new createjs.Text("","18px monospace","#000"));
output.lineHeight=15;
output.lineWidth=100;
output.textBaseline="top";
output.x=stage.canvas.width-output.lineWidth-10;
output.y=20;

textBox1=new textBox();
}
function gameUpdate(){
	stage.update();
backGroundUpdate();
	output.text="FPS:"+createjs.Ticker.getFPS()+"\n"+"bg_index:"+bg_index.toString();
//+background.bg_index.tostring();  
switch(gameState)
{
case "start":
gameState="choose";
break;
case "choose":
textBox1.output.text="isChange:"+isChange;
break;
case "response":
break;
case "result":
break;
case "tryAgain":
break;
case "gameOver":
break;
default:
textBox1.output.text="rrr";
}
}1
function backGroundUpdate()
{
if(isChange==true)
{
//isChange=false;
if(BackGrounds[bg_index].Bitmap.visible==true)
{
   BackGrounds[bg_index].Bitmap.alpha-=background_change_speed;
}
 
if(BackGrounds[bg_index].Bitmap.alpha&lt;=0.2)
{
BackGrounds[bg_index].Bitmap.visible=false;
BackGrounds[targetBG_index_switchTo].Bitmap.visible=true;
BackGrounds[targetBG_index_switchTo].Bitmap.alpha+=background_change_speed;
if(BackGrounds[targetBG_index_switchTo].Bitmap.alpha&gt;=1)
{
isChange=false;
bg_index=targetBG_index_switchTo;
}
}
}
}
</code></pre>

<p>css:</p>

<pre><code>body{
	 background-color:#aabbaa;
}
#gameCanvas{
	background-color:rgba(0,0,0,1);
}
</code></pre>
</div>

</article>

	<div class="share">
	<div class="addthis_toolbox addthis_default_style ">
	
	
	<a class="addthis_button_tweet"></a>
	
	
	
	<!-- JiaThis Button BEGIN -->
<div class="jiathis_style_32x32">
	<a class="jiathis_button_qzone"></a>
	<a class="jiathis_button_tsina"></a>
	<a class="jiathis_button_tqq"></a>
	<a class="jiathis_button_weixin"></a>
	<a class="jiathis_button_renren"></a>
	<a href="http://www.jiathis.com/share?uid=1838235" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
	<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript">
var jiathis_config = {data_track_clickback:'true'};
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1371541356556113" charset="utf-8"></script>
<!-- JiaThis Button END -->
<!-- UY BEGIN -->
<div id="uyan_frame"></div>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=1838235"></script>
<!-- UY END -->
	
	<a class="addthis_counter addthis_pill_style"></a>
	</div>
  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid="></script>
</div>


</div>
			</div>
			<footer id="footer" class="inner"><p>
  Copyright &copy; 2014 - Nicholas -
  <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>

Design credit: <a href="http://shashankmehta.in/archive/2012/greyshade.html">Shashank Mehta</a></footer>
			







  <script type="text/javascript">
    (function(){
      var twitterWidgets = document.createElement('script');
      twitterWidgets.type = 'text/javascript';
      twitterWidgets.async = true;
      twitterWidgets.src = '//platform.twitter.com/widgets.js';
      document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
    })();
  </script>





		</div>
	</div>
</body>
</html>
